﻿<UserControl x:Class="OnlinePlotsService.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:exincs="clr-namespace:OnlinePlots.Plots;assembly=OnlinePlots"
    xmlns:plots="clr-namespace:OnlinePlots.Plots.Elements;assembly=OnlinePlots"
    xmlns:ds="clr-namespace:OnlinePlots.Plots.DataSets;assembly=OnlinePlots"
    xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
    xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
    xmlns:ops="clr-namespace:OnlinePlotsService">

    <UserControl.Resources>
        <Style TargetType="TextBlock" x:Key="ParseJSErrorTextBlock">
            <Setter Property="Foreground" Value="Red" />
            <Setter Property="FontSize" Value="12" />
        </Style>

        <Style TargetType="TextBlock" x:Key="NewPlotTextBlock">
            <Setter Property="FontSize" Value="18" />
            <Setter Property="Padding" Value="0 4 0 0" />
        </Style>

        <Style TargetType="TextBox" x:Key="NewPlotTextBox">
            <Setter Property="FontSize" Value="18" />
            <Setter Property="Margin" Value="13 0" />
            <Setter Property="Width" Value="400" />
        </Style>

        <Style TargetType="Button" x:Key="NewPlotButton">
            <Setter Property="FontSize" Value="18" />
            <Setter Property="Padding" Value="10 4" />
        </Style>

        <Storyboard x:Name="columnAnimation" Completed="columnAnimation_Completed">
            <DoubleAnimation x:Name="doubleAnimation" Storyboard.TargetName="cHelp" Storyboard.TargetProperty="MaxWidth" SpeedRatio="2" To="35"/>
        </Storyboard>

        <LinearGradientBrush x:Key="ExpanderArrowFill" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="White" Offset="0"/>
            <GradientStop Color="#FFBFBFBF" Offset="0.5"/>
            <GradientStop Color="#FF878787" Offset="1"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="ExpanderArrowHoverFill" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#FFF0F8FE" Offset="0"/>
            <GradientStop Color="#FFE0F3FE" Offset="0.3"/>
            <GradientStop Color="#FF6FA7C5" Offset="1"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="ExpanderArrowPressedFill" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#FFDCF0FA" Offset="0"/>
            <GradientStop Color="#FFC5E6F7" Offset="0.2"/>
            <GradientStop Color="#FF5690D0" Offset="1"/>
        </LinearGradientBrush>

        <Style x:Key="FunctionSamples" TargetType="HyperlinkButton">
            <Setter Property="FontSize" Value="13" />
        </Style>

        <Style x:Key="AvailableFunctions" TargetType="HyperlinkButton">
            <Setter Property="FontSize" Value="13" />
        </Style>

        <DataTemplate x:Key="FullscreenButtonTemplate">
            <Image 
                Source="/Resources/Fullscreen.png" 
                Width="16" 
                Height="16" />
        </DataTemplate>

        <DataTemplate x:Key="UnfullscreenButtonTemplate">
            <Image 
                Source="/Resources/Unfullscreen.png" 
                Width="16" 
                Height="16" />
        </DataTemplate>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition MinHeight="400" Height="*"/>
            <RowDefinition Height="50"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" MinWidth="300"/>
            <ColumnDefinition Width="220"/>
            <ColumnDefinition x:Name="cHelp" MinWidth="35" MaxWidth="35" Width="300" />
        </Grid.ColumnDefinitions>

        <ToggleButton x:Name="bExpander" IsChecked="True" Grid.Column="2" Grid.Row="0" Width="35" Height="70" HorizontalAlignment="Left" VerticalAlignment="Top" Click="bExpander_Click">
            <ToggleButton.Template>
                <ControlTemplate TargetType="ToggleButton">
                    <Grid Background="Transparent">
                        <vsm:VisualStateManager.VisualStateGroups>
                            <vsm:VisualStateGroup x:Name="CheckStates">
                                <vsm:VisualStateGroup.Transitions>
                                    <vsm:VisualTransition GeneratedDuration="00:00:00"/>
                                </vsm:VisualStateGroup.Transitions>
                                <vsm:VisualState x:Name="Checked">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="arrow" Storyboard.TargetProperty="Data">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="M 1,4.5 L 4.5,1 L 8,4.5"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="Unchecked"/>
                            </vsm:VisualStateGroup>
                            <vsm:VisualStateGroup x:Name="CommonStates">
                                <vsm:VisualStateGroup.Transitions>
                                    <vsm:VisualTransition GeneratedDuration="0"/>
                                    <vsm:VisualTransition GeneratedDuration="00:00:00.1" To="MouseOver"/>
                                    <vsm:VisualTransition GeneratedDuration="00:00:00.1" To="Pressed"/>
                                </vsm:VisualStateGroup.Transitions>
                                <vsm:VisualState x:Name="Normal"/>
                                <vsm:VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ColorAnimation BeginTime="0" Storyboard.TargetName="circle" Storyboard.TargetProperty="(Ellipse.Stroke).(SolidColorBrush.Color)" To="#FF3C7FB1"/>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="circle" Storyboard.TargetProperty="(Ellipse.Fill)">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ExpanderArrowHoverFill}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ColorAnimation BeginTime="0" Storyboard.TargetName="arrow" Storyboard.TargetProperty="(Path.Stroke).(SolidColorBrush.Color)" To="#222"/>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ColorAnimation BeginTime="0" Storyboard.TargetName="circle" Storyboard.TargetProperty="(Ellipse.Stroke).(SolidColorBrush.Color)" To="#FF526C7B"/>
                                        <DoubleAnimation BeginTime="0" Storyboard.TargetName="circle" Storyboard.TargetProperty="StrokeThickness" To="1.5"/>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="circle" Storyboard.TargetProperty="(Ellipse.Fill)">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ExpanderArrowPressedFill}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ColorAnimation BeginTime="0" Storyboard.TargetName="arrow" Storyboard.TargetProperty="(Path.Stroke).(SolidColorBrush.Color)" To="#FF003366"/>
                                    </Storyboard>
                                </vsm:VisualState>
                            </vsm:VisualStateGroup>
                            <vsm:VisualStateGroup x:Name="FocusStates">
                                <vsm:VisualState x:Name="Focused" />
                                <vsm:VisualState x:Name="Unfocused"/>
                            </vsm:VisualStateGroup>
                        </vsm:VisualStateManager.VisualStateGroups>
                        <Border Padding="{TemplateBinding Padding}">
                            <Grid Background="Transparent">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="19"/>
                                    <RowDefinition Height="50"/>
                                </Grid.RowDefinitions>
                                <Grid HorizontalAlignment="Center" VerticalAlignment="Top">
                                    <Grid.RenderTransform>
                                        <TransformGroup>
                                            <TransformGroup.Children>
                                                <TransformCollection>
                                                    <RotateTransform Angle="270" CenterX="9.5" CenterY="9.5"/>
                                                </TransformCollection>
                                            </TransformGroup.Children>
                                        </TransformGroup>
                                    </Grid.RenderTransform>
                                    <Ellipse Fill="{StaticResource ExpanderArrowFill}" Height="19" HorizontalAlignment="Center" x:Name="circle" Stroke="DarkGray" VerticalAlignment="Center" Width="19"/>
                                    <Path Data="M 1,1.5 L 4.5,5 L 8,1.5" HorizontalAlignment="Center" x:Name="arrow" Stroke="#666" StrokeThickness="2" VerticalAlignment="Center"/>
                                </Grid>
                                <TextBlock Text="Help" FontFamily="Tahoma" FontSize="13" Grid.Row="1">
									<TextBlock.RenderTransform>
										<TransformGroup>
											<RotateTransform Angle="270" CenterX="0" CenterY="0"/>
											<TranslateTransform X="4" Y="40" />
										</TransformGroup>
									</TextBlock.RenderTransform>
                                </TextBlock>
                            </Grid>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </ToggleButton.Template>
        </ToggleButton>

        <StackPanel Orientation="Vertical" x:Name="pHelp" Grid.Column="2" Visibility="Collapsed">
            <TextBlock HorizontalAlignment="Left"  Margin="45,5,0,0" Width="244" VerticalAlignment="Top" Text="Plot your function with Exincs" TextWrapping="Wrap" FontSize="20" Foreground="#FFFFA500"/>
            <TextBlock HorizontalAlignment="Left"  Margin="12,10,0,0" Width="280" Text="Just type your formula and get free zoomable and pannable plot. The service is powered by PlotControlLibrary. Examples of formulas are:" TextWrapping="Wrap" FontSize="13" VerticalAlignment="Top"/>
            <Canvas Margin="50,10,30,0" Height="115">
                <HyperlinkButton x:Name="lSampleFunc1" Margin="0,0,0,0" Content="1 / x" Style="{StaticResource FunctionSamples}" Click="lSampleFunc1_Click"/>
                <HyperlinkButton x:Name="lSampleFunc2" Margin="0,25,0,0" Content="log(x)" Style="{StaticResource FunctionSamples}" Click="lSampleFunc2_Click"/>
                <HyperlinkButton x:Name="lSampleFunc3" Margin="0,50,0,0" Content="sqrt(x)" Style="{StaticResource FunctionSamples}" Click="lSampleFunc3_Click"/>
                <HyperlinkButton x:Name="lSampleFunc4" Margin="0,75,0,0" Content="x * sin(x)" Style="{StaticResource FunctionSamples}" Click="lSampleFunc4_Click"/>
                <HyperlinkButton x:Name="lSampleFunc5" Margin="0,100,0,0" Content="x - 2 ? tg(x) : x" Style="{StaticResource FunctionSamples}" Click="lSampleFunc5_Click"/>
            </Canvas>
            <TextBlock HorizontalAlignment="Left"  Margin="12,30,0,0" Width="280" Text="Use mouse right button to pan and mouse wheel to zoom the plot. " TextWrapping="Wrap" FontSize="13" VerticalAlignment="Top"/>
            <TextBlock HorizontalAlignment="Left"  Margin="12,20,0,0" Width="280" Text="Available operators: " TextWrapping="Wrap" FontSize="13" VerticalAlignment="Top"/>
            <StackPanel Orientation="Horizontal">
                <StackPanel Orientation="Vertical" Margin="30,0,0,0">
                    <HyperlinkButton Content="+" Style="{StaticResource AvailableFunctions}" TargetName="_blank" NavigateUri="http://en.wikipedia.org/wiki/Plus_and_minus_signs"/>
                    <HyperlinkButton Content="-" Style="{StaticResource AvailableFunctions}" TargetName="_blank" NavigateUri="http://en.wikipedia.org/wiki/Plus_and_minus_signs"/>
                </StackPanel>
                <StackPanel Orientation="Vertical" Margin="40,0,0,0">
                    <HyperlinkButton Content="*" Style="{StaticResource AvailableFunctions}" TargetName="_blank" NavigateUri="http://en.wikipedia.org/wiki/Multiplication"/>
                    <HyperlinkButton Content="/" Style="{StaticResource AvailableFunctions}" TargetName="_blank" NavigateUri="http://en.wikipedia.org/wiki/Division_(mathematics)"/>
                </StackPanel>
                <StackPanel Orientation="Vertical" Margin="40,0,0,0">
                    <HyperlinkButton Content="^" Style="{StaticResource AvailableFunctions}" TargetName="_blank" NavigateUri="http://en.wikipedia.org/wiki/Exponentiation"/>
                    <HyperlinkButton Content="?:" Style="{StaticResource AvailableFunctions}" TargetName="_blank" NavigateUri="http://en.wikipedia.org/wiki/Conditional_operator"/>
                </StackPanel>
            </StackPanel>
            <TextBlock HorizontalAlignment="Left"  Margin="12,10,0,0" Width="280" Text="Available functions: " TextWrapping="Wrap" FontSize="13" VerticalAlignment="Top"/>
            <StackPanel Orientation="Horizontal">
                <StackPanel Orientation="Vertical" Margin="30,0,0,0">
                    <HyperlinkButton Content="sin" Style="{StaticResource AvailableFunctions}" TargetName="_blank" NavigateUri="http://en.wikipedia.org/wiki/Sine#Sine"/>
                    <HyperlinkButton Content="cos" Style="{StaticResource AvailableFunctions}" TargetName="_blank" NavigateUri="http://en.wikipedia.org/wiki/Cosine#Cosine"/>
                    <HyperlinkButton Content="tg" Style="{StaticResource AvailableFunctions}" TargetName="_blank" NavigateUri="http://en.wikipedia.org/wiki/Tangent#Tangent"/>
                    <HyperlinkButton Content="ln" Style="{StaticResource AvailableFunctions}" TargetName="_blank" NavigateUri="http://en.wikipedia.org/wiki/Natural_logarithm"/>
                    <HyperlinkButton Content="log" Style="{StaticResource AvailableFunctions}" TargetName="_blank" NavigateUri="http://en.wikipedia.org/wiki/Common_logarithm"/>
                </StackPanel>
                <StackPanel Orientation="Vertical" Margin="40,0,0,0">
                    <HyperlinkButton Content="arcsin" Style="{StaticResource AvailableFunctions}" TargetName="_blank" NavigateUri="http://en.wikipedia.org/wiki/Inverse_trigonometric_function"/>
                    <HyperlinkButton Content="arccos" Style="{StaticResource AvailableFunctions}" TargetName="_blank" NavigateUri="http://en.wikipedia.org/wiki/Inverse_trigonometric_function"/>
                    <HyperlinkButton Content="arctg" Style="{StaticResource AvailableFunctions}" TargetName="_blank" NavigateUri="http://en.wikipedia.org/wiki/Inverse_trigonometric_function"/>
                    <HyperlinkButton Content="abs" Style="{StaticResource AvailableFunctions}" TargetName="_blank" NavigateUri="http://en.wikipedia.org/wiki/Absolute_value"/>
                    <HyperlinkButton Content="sign" Style="{StaticResource AvailableFunctions}" TargetName="_blank" NavigateUri="http://en.wikipedia.org/wiki/Sign_function"/>
                </StackPanel>
                <StackPanel Orientation="Vertical" Margin="40,0,0,0">
                    <HyperlinkButton Content="sqrt" Style="{StaticResource AvailableFunctions}" TargetName="_blank" NavigateUri="http://en.wikipedia.org/wiki/Square_root"/>
                    <HyperlinkButton Content="exp" Style="{StaticResource AvailableFunctions}" TargetName="_blank" NavigateUri="http://en.wikipedia.org/wiki/Exponential_function"/>
                    <HyperlinkButton Content="round" Style="{StaticResource AvailableFunctions}" TargetName="_blank" NavigateUri="http://en.wikipedia.org/wiki/Rounding"/>
                    <HyperlinkButton Content="ceil" Style="{StaticResource AvailableFunctions}" TargetName="_blank" NavigateUri="http://en.wikipedia.org/wiki/Ceil_function"/>
                    <HyperlinkButton Content="floor" Style="{StaticResource AvailableFunctions}" TargetName="_blank" NavigateUri="http://en.wikipedia.org/wiki/Floor_function"/>
                </StackPanel>
            </StackPanel>
        </StackPanel >

        <Grid Grid.Row="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="35"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <StackPanel Orientation="Horizontal" Margin="20,10,0,0">
                <Button x:Name="bFullScreen" ToolTipService.ToolTip="Fullscreen mode" Height="25" Width="25" Margin="0,0,5,0" Click="bFullScreen_Click" ContentTemplate="{StaticResource FullscreenButtonTemplate}" />
                <Button x:Name="bCentre" ToolTipService.ToolTip="Centre" Height="25" Width="25" Margin="0,0,40,0" Click="bCentre_Click">
                    <Button.ContentTemplate>
                        <DataTemplate>
                            <Image 
                      Source="/Resources/Centre.png" 
                      Width="16" 
                      Height="16" />
                        </DataTemplate>
                    </Button.ContentTemplate>
                </Button>

                <Button x:Name="bZoomOut" ToolTipService.ToolTip="Zoom Out (PageDown or -)" Height="25" Width="25" Margin="0,0,2,0" Click="bZoomOut_Click">
                    <Button.ContentTemplate>
                        <DataTemplate>
                            <Image 
                      Source="/Resources/ZoomOut.png" 
                      Width="16" 
                      Height="16" />
                        </DataTemplate>
                    </Button.ContentTemplate>
                </Button>
                <Slider x:Name="sZoom" Minimum="-4" Maximum="5" IsDirectionReversed="True" Width="200" ValueChanged="sZoom_ValueChanged" />
                <Button x:Name="bZoomIn" ToolTipService.ToolTip="Zoom In (PageUp or +)" Height="25" Width="25" Margin="2,0,0,0" Click="bZoomIn_Click">
                    <Button.ContentTemplate>
                        <DataTemplate>
                            <Image 
                      Source="/Resources/ZoomIn.png" 
                      Width="16" 
                      Height="16" />
                        </DataTemplate>
                    </Button.ContentTemplate>
                </Button>

            </StackPanel>

            <exincs:ExplicitFunctionPlotControl Margin="10,0,10,10" Grid.Row="1" x:Name="explicitFunctionPlotControl" LogicalFrameZoomed="explicitFunctionPlotControl_LogicalFrameZoomed">
            </exincs:ExplicitFunctionPlotControl>
        </Grid>

        <Canvas Grid.Column="1" Width="200" HorizontalAlignment="Left">
            <Button x:Name="bAdd" ToolTipService.ToolTip="Add new function" Height="25" Width="25" Canvas.Top="10" Click="bAdd_Click">
                <Button.ContentTemplate>
                    <DataTemplate>
                        <Image 
                      Source="/Resources/Add.png" 
                      Width="16" 
                      Height="16" />
                    </DataTemplate>
                </Button.ContentTemplate>
            </Button>
            <Button x:Name="bDelete" ToolTipService.ToolTip="Delete function" Height="25" Width="25" Canvas.Left="29" Canvas.Top="10" IsEnabled="False" Click="bDelete_Click">
                <Button.ContentTemplate>
                    <DataTemplate>
                        <Image 
                      Source="/Resources/Delete.png" 
                      Width="16" 
                      Height="16" />
                    </DataTemplate>
                </Button.ContentTemplate>
            </Button>

            <Button x:Name="bOpen" ToolTipService.ToolTip="Open" Height="25" Width="25" Canvas.Left="146" Canvas.Top="10" Click="bOpen_Click">
                <Button.ContentTemplate>
                    <DataTemplate>
                        <Image 
                      Source="/Resources/Open.png" 
                      Width="16" 
                      Height="16" />
                    </DataTemplate>
                </Button.ContentTemplate>
            </Button>
            <Button x:Name="bSave" ToolTipService.ToolTip="Save" Height="25" Width="25" Canvas.Left="175" Canvas.Top="10" IsEnabled="False" Click="bSave_Click">
                <Button.ContentTemplate>
                    <DataTemplate>
                        <Image 
                      Source="/Resources/Save.png" 
                      Width="16" 
                      Height="16" />
                    </DataTemplate>
                </Button.ContentTemplate>
            </Button>
        </Canvas>

        <data:DataGrid 
            Grid.Column="1"
            HorizontalAlignment="Left"
            Margin="0,39,0,0"
            Width="200"
            Height="Auto"
            x:Name="dgFunctions" 
            AutoGenerateColumns="False" 
            CanUserReorderColumns="False"
            SelectionMode="Single"
            HorizontalScrollBarVisibility="Disabled"
            CanUserSortColumns="False"
            CanUserResizeColumns="False"
            SelectionChanged="dgFunctions_SelectionChanged">
            <data:DataGrid.Columns>
                <data:DataGridTemplateColumn Width="25">
                    <data:DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Button x:Name="bSelectColor" ToolTipService.ToolTip="Select color" Click="bSelectColor_Click" >
                                <Button.Template>
                                    <ControlTemplate>
                                        <Canvas Background="{Binding Brush}" Width="16" Height="16" />
                                    </ControlTemplate>
                                </Button.Template>
                            </Button>
                        </DataTemplate>
                    </data:DataGridTemplateColumn.CellTemplate>
                </data:DataGridTemplateColumn>
                <data:DataGridTextColumn Header="Name" Binding="{Binding Name}" Width="145"/>
                <data:DataGridCheckBoxColumn Binding="{Binding Visibility}" Width="30">
                    <data:DataGridCheckBoxColumn.HeaderStyle>
                        <Style xmlns:dataprimitives="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls.Data" TargetType="dataprimitives:DataGridColumnHeader">
                            <Setter Property="ContentTemplate">
                                <Setter.Value>
                                    <DataTemplate>
                                        <Image 
                                              Source="/Resources/Visibility.png" 
                                              Width="16" 
                                              Height="16" />
                                    </DataTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </data:DataGridCheckBoxColumn.HeaderStyle>
                </data:DataGridCheckBoxColumn>
            </data:DataGrid.Columns>
        </data:DataGrid>

        <ops:SimpleColorPicker x:Name="colorPicker" Grid.Column="1" VerticalAlignment="Top" HorizontalAlignment="Left" Visibility="Collapsed" Clicked="colorPicker_Clicked" ColorChanged="colorPicker_ColorChanged" />

        <StackPanel Grid.Row="1" HorizontalAlignment="Center">
            <StackPanel Orientation="Horizontal">
                <TextBlock Style="{StaticResource NewPlotTextBlock}" Text="F(x) ="></TextBlock>
                <TextBox x:Name="tbFunction" Style="{StaticResource NewPlotTextBox}" KeyDown="FunctionTextBox_KeyDown" IsEnabled="False"></TextBox>
                <Button x:Name="bApply" Style="{StaticResource NewPlotButton}" Content="Apply" Click="ApplyButton_Click" IsEnabled="False"></Button>
            </StackPanel>
        </StackPanel>
    </Grid>
</UserControl>